<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>listview</title>
    <link rel="stylesheet" href="css/base.css"/>
    <link rel="stylesheet" href="css/common.css"/>
    <style>
        body {
            margin: 0 auto;
            max-width: 720px;
            padding: 0 10px;
            text-align: left;
        }

        .tips {
            background-color: #f8f8f8;
            margin: 10px 0 0;
            padding: 10px;
        }

        .title {
            color: red;
            font-weight: bold;
            padding: 10px 0 0;
        }

        h1 {
            text-align: center;
            font-size: 18px;
        }

        h2 {
            font-size: 15px;
            font-weight: normal;
        }

        .wrapper {
            padding: 20px 0 0;
            line-height: 24px;
        }

        .tab {
            padding: 15px 0;
            border-bottom: 1px solid #999;
        }

        .tab:last-child {
            border-bottom: 0;
        }

        .param {
            word-break: break-all;
        }

        .action {
            padding: 10px 0 0;
        }

        .action button {
            margin: 0 0 10px;
            padding: 5px 20px;
        }

        .select-ipt {
            position: relative;
            padding: 0 0 0 105px;
        }

        .select-ipt .tt {
            position: absolute;
            width: 105px;
            word-wrap: break-word;
            word-break: break-all;
            left: 0;
            top: 0;
        }

        .weui_input {
            width: 100%;
            border: 0;
            outline: 0;
            -webkit-appearance: none;
            background-color: transparent;
            height: 24px;
            line-height: 24px;
        }

        .pageAnimationScale {
            float: left;
            margin-right: 10px;
            width: 80px;

        }

        /*.weui-actionsheet-top-shade{*/
        /*opacity: .7 !important;*/
        /*}*/

        /*.weui-actionsheet-top{*/
        /*position: fixed!important;*/
        /*left: 0;*/
        /*top: 0;*/
        /*-webkit-transform: translateY(-100%);*/
        /*transform: translateY(-100%);*/
        /*-webkit-backface-visibility: hidden;*/
        /*backface-visibility: hidden;*/
        /*z-index: 5000;*/
        /*width: 100%;*/
        /*background-color: #fff;*/
        /*-webkit-transition: -webkit-transform .3s;*/
        /*transition: -webkit-transform .3s;*/
        /*}*/

        /*.weui-actionsheet-top-toggle{*/
        /*-webkit-transform: translateY(0);*/
        /*transform: translateY(0);*/
        /*}*/

        .weui-page-scale .page-scale .slide2 {
            box-sizing: content-box;
            width: 100%;
            height: 100%;
            position: relative;
            transition-property: transform, -webkit-transform;
        }

        .weui-page-scale .page-scale .slide2 li {
            -webkit-flex-shrink: 0;
            -ms-flex: 0 0 auto;
            -ms-flex-negative: 0;
            flex-shrink: 0;
            width: 100%;
            height: 100%;
            position: relative;
        }

        .weui-page-scale .page-scale .slide2 li .container {
            height: 100%;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            overflow: hidden;
        }

        .weui-page-scale .page-scale .slide2 li .container img {
            max-width: 100%;
            margin-top: -30px;
        }

        .slide {
            position: relative;
            z-index: 1;
        }

        .slide li {
            flex-shrink: 0;
            height: 74.666667vw;
            position: relative;
            transform: translate3d(0, 0, 0);
            z-index: 1;
        }

        .slide li .img {
            height: 100%;
            background-size: cover;
            background-position: center;
        }

        .tips:focus {
            background-color: red;
        }

        .item-listview {
            border-bottom: 1px dashed #ddd;
        }
    </style>
    <script src="https://www.web000.cn/layer.min.js"></script>
</head>
<body>
<div class="wrapper">
    <div class="tab">
        <h2>listview列表摸版加载</h2>
        <div class="action">
            <button class="listmore">点击加载更多</button>
            <div id="view">
                <template>
                    <p class="flex-box">
                        <span class="flex1">{{ d.Title}}</span>
                        {{# if(d.status== 0){ }}
                        <span class="status">已审核</span>
                        {{#}else if(d.status== 1){ }}
                        <span class="status">审核失败</span>
                        {{#}else if(d.status== 2){ }}
                        <span class="status">审核中</span>
                        {{# } }}
                    </p>
                    <p><span>{{ d.NickName}}</span><span>{{ d.Content || '' }}</span></p>
                    <div class="photo">
                        {{# if(d.Photos.length > 0){ }}
                        <ul class="flex-box">
                            {{# laytpl.each(d.Photos, function(index, item){ }}
                            <li><img src="{{ item.ThumbnailUrl }}" width="100%"/></li>
                            {{# }); }}
                        </ul>
                        {{#} }}
                    </div>
                </template>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    var data = {
        "Total": 8,
        "ResultCode": "0",
        "ErrMsg": "成功",
        "List": [
            {
                "ID": 41,
                "ISubjectD": null,
                "Title": "测试标题",
                "NickName": "Gallen.Yu",
                "RealName": "111111111111111",
                "HeaderIcon": "https://mobile.jxdyp.com/resource/images/head_default.png",
                "CreateTime": "2021/12/27 13:57:10",
                "Content": "我也参加这个活动",
                "Photos": [
                    {
                        "ID": 51,
                        "WorksID": 41,
                        "ThumbnailUrl": "https://resource.jxdyp.com/jxmskj/backuploads/images/good/20230517/ImgGood_1d2c0ca2-e596-4137-9069-99df75ad708a.jpg_240x240.jpg"
                    },
                ],
                "CommentCount": 0,
                "status": 0,
            },
            {
                "ID": 40,
                "ISubjectD": null,
                "Title": "测试图片",
                "NickName": "手机用户3270",
                "RealName": "李俊",
                "HeaderIcon": "http://m.test.jaszgh.jxdyp.com/resource/images/header/7.png",
                "CreateTime": "2021/12/27 13:55:35",
                "Content": "测试",
                "Photos": [
                    {
                        "ID": 50,
                        "WorksID": 40,
                        "ThumbnailUrl": "https://yanxuan-item.nosdn.127.net/a9ee4d2af8823d2df1b7f0960a05f69e.jpg"
                    }
                ],
                "CommentCount": 0,
                "status": 1,
            },
            {
                "ID": 38,
                "ISubjectD": null,
                "Title": "庆祝",
                "NickName": "手机用户3270",
                "RealName": "李俊",
                "HeaderIcon": "http://m.test.jaszgh.jxdyp.com/resource/images/header/7.png",
                "CreateTime": "2021/12/27 13:43:36",
                "Content": "喝点酒",
                "Photos": [],
                "CommentCount": 0,
                "status": 2,
            },
            {
                "ID": 23,
                "ISubjectD": null,
                "Title": "圣诞2",
                "NickName": "手机用户3270",
                "RealName": "李俊",
                "HeaderIcon": "http://m.test.jaszgh.jxdyp.com/resource/images/header/7.png",
                "CreateTime": "2021/12/25 16:04:00",
                "Content": "今天是圣诞2",
                "Photos": [],
                "CommentCount": 0,
                "status": 1,
            },
            {
                "ID": 20,
                "ISubjectD": null,
                "Title": "圣诞",
                "NickName": "手机用户3270",
                "RealName": "李俊",
                "HeaderIcon": "http://m.test.jaszgh.jxdyp.com/resource/images/header/7.png",
                "CreateTime": "2021/12/25 15:54:03",
                "Content": "今天是圣诞",
                "Photos": [],
                "CommentCount": 0,
                "status": 0,
            },
            {
                "ID": 4,
                "ISubjectD": null,
                "Title": "测试作品1",
                "NickName": "手机用户3270",
                "RealName": "李俊",
                "HeaderIcon": "http://m.test.jaszgh.jxdyp.com/resource/images/header/7.png",
                "CreateTime": "2021/12/23 19:08:43",
                "Content": "测试",
                "Photos": [
                    {
                        "ID": 1,
                        "WorksID": 4,
                        "ThumbnailUrl": "https://resource.jxdyp.com/jxmskj/backuploads/images/good/20230427//ImgGood_baac78c2-0e15-4ddf-8693-340ccf91b479.jpg_240x240.jpg"
                    },
                ],
                "CommentCount": 0,
                "status": 2,
            },
            {
                "ID": 5,
                "ISubjectD": null,
                "Title": "测试作品2",
                "NickName": "手机用户3270",
                "RealName": "李俊",
                "HeaderIcon": "http://m.test.jaszgh.jxdyp.com/resource/images/header/7.png",
                "CreateTime": "2021/12/23 19:08:43",
                "Content": "测试",
                "Photos": [
                    {
                        "ID": 6,
                        "WorksID": 5,
                        "ThumbnailUrl": "https://resource.jxdyp.com/jxmskj/backuploads/images/good/20230605//ImgGood_14311903-9934-4854-8850-dff80a1cfc75.jpg_thumbnail_400x400.jpg"
                    },
                ],
                "CommentCount": 0,
                "status": 1,
            }
        ],
        "timespan": "2022-01-09 22:19:38",
        "Append": "[{\"ID\":7,\"Name\":\"冬至活动\",\"ThumbnailUrl\":\"http://m.test.jaszgh.jxdyp.com/backuploads/images/answer/20211224//e1abc025-fd06-4fee-9402-bd5954a0e1bc.jpg\",\"StartTime\":\"2021/12/23 00:00:00\",\"EndTime\":\"2021/12/30 16:45:06\",\"PublishFlag\":false,\"RuleDesc\":\"无规则限制\",\"EnableVote\":false,\"EnableComment\":false,\"Status\":1,\"EnableSubject\":false,\"EnablePicture\":true,\"EnableTxt\":true,\"Name1\":\"冬至祝福\",\"workNum\":9,\"memberNum\":3}]",
        "Append2": null
    };
    var data2 = {
        "Total": 8,
        "ResultCode": "0",
        "ErrMsg": "成功",
        "List": [
            {
                "ID": 41,
                "ISubjectD": null,
                "Title": "易力多功能可折叠收纳水桶501",
                "NickName": "Gallen.Yu",
                "RealName": "111111111111111",
                "HeaderIcon": "https://mobile.jxdyp.com/resource/images/head_default.png",
                "CreateTime": "2021/12/27 13:57:10",
                "Content": "我也参加这个活动",
                "Photos": [
                    {
                        "ID": 51,
                        "WorksID": 41,
                        "ThumbnailUrl": "https://resource.jxdyp.com/jxmskj/backuploads/images/goods/20220913//6cdd0eb5-0f33-49f6-9873-5e54941150cc.jpg_thumbnail_400x400.jpg"
                    },
                ],
                "CommentCount": 0,
                "status": 0,
            },
            {
                "ID": 40,
                "ISubjectD": null,
                "Title": "【网易严选】2件7折 99%除醛率高效除醛净味果冻",
                "NickName": "手机用户3270",
                "RealName": "李俊",
                "HeaderIcon": "http://m.test.jaszgh.jxdyp.com/resource/images/header/7.png",
                "CreateTime": "2021/12/27 13:55:35",
                "Content": "测试",
                "Photos": [
                    {
                        "ID": 50,
                        "WorksID": 40,
                        "ThumbnailUrl": "https://yanxuan-item.nosdn.127.net/03afcc6cc87be163be26783ddde9b316.jpg"
                    }
                ],
                "CommentCount": 0,
                "status": 1,
            },
            {
                "ID": 38,
                "ISubjectD": null,
                "Title": "庆祝",
                "NickName": "手机用户3270",
                "RealName": "李俊",
                "HeaderIcon": "http://m.test.jaszgh.jxdyp.com/resource/images/header/7.png",
                "CreateTime": "2021/12/27 13:43:36",
                "Content": "喝点酒",
                "Photos": [],
                "CommentCount": 0,
                "status": 2,
            },
        ],
        "timespan": "2022-01-09 22:19:38",
        "Append": "[{\"ID\":7,\"Name\":\"冬至活动\",\"ThumbnailUrl\":\"http://m.test.jaszgh.jxdyp.com/backuploads/images/answer/20211224//e1abc025-fd06-4fee-9402-bd5954a0e1bc.jpg\",\"StartTime\":\"2021/12/23 00:00:00\",\"EndTime\":\"2021/12/30 16:45:06\",\"PublishFlag\":false,\"RuleDesc\":\"无规则限制\",\"EnableVote\":false,\"EnableComment\":false,\"Status\":1,\"EnableSubject\":false,\"EnablePicture\":true,\"EnableTxt\":true,\"Name1\":\"冬至祝福\",\"workNum\":9,\"memberNum\":3}]",
        "Append2": null
    };
    $$('#view').listview({
        "data": data,
        "keyEach": 'List',
        "itemTap": function (listitem, dataitem, datasource, event) {
            console.log(listitem)
            console.log(dataitem)
            console.log(datasource)
            console.log(event)
        }
    });

    $$('.listmore').on('click', function () {
        $$('#view').listview({
            "empty":true,
            "data": data2,
            "keyEach": 'List',
            "itemTap": function (listitem, dataitem, datasource, event) {
                console.log(listitem)
                console.log(dataitem)
                console.log(datasource)
                console.log(event)
            }
        });
    })
</script>
</body>
</html>
